<template>
  <el-container>
    <el-main class='main'>
      <div class="import-header">
        <el-input class="input-border" auto-complete="off" placeholder="请输入学号或姓名" v-model="input_value" type="text"
          clearable></el-input>
        <el-button type="primary" @click="getdata('stuNo')">学号查询</el-button>
        <el-button type="primary" @click="getdata('stuName')">姓名查询</el-button>
        <el-button type="primary" @click="getdata('instituteName')">学院查询</el-button>
        <el-button type="primary" @click="getdata('className')">班级查询</el-button>
      </div>
      <div class="import-main">
        <div class="cards_show">
          <div v-for="(item,index) in datalist.slice((currentPage-1)*PageSize,currentPage*PageSize)" :key="index" class="stu_card_style">
            <stuCard :items='item' :index='index' name='clear'></stuCard>
          </div>
        </div>
        <div class="block">
          <el-pagination @prev-click="addpage" @next-click="delpage" :key="currentPage"
            :current-page.sync="currentPage" :page-size="PageSize" :total='totalCount' hide-on-single-page
            layout="prev, pager, next">
          </el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import stuCard from '../components/common/student_card.vue';
  export default {
    name: 'studata',
    data() {
      return {
        input_value: '',
        datalist: [],
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 1,
        // 个数选择器（可修改）
        pageSizes: [15,20, 25],
        // 默认每页显示的条数（可修改）
        PageSize: 20,

      }
    },
    components: {
      stuCard
    },
    methods: {
      // 分页
      addpage(val){
        this.currentPage = val
      },
      delpage(val){
        this.currentPage = val
      },
      getdata(type) {
        this.datalist = [];
        if (this.input_value == '') {
          this.$alert('没有输入要查询的信息');
          return 0;
        }
        let data = {}
        switch (type) {
          case 'stuNo':
            data.stuNo = this.input_value;
            break;
          case 'stuName':
            data.stuName = this.input_value;
            break;
          case 'instituteName':
            data.instituteName = this.input_value;
            break;
          case 'className':
            data.className = this.input_value;
            break;
        }
        let url = type == 'stuNo' ? '/studentInfo/findByStudentId' :
          type == 'stuName' ? '/studentInfo/findByName' :
          type == 'instituteName' ? '/studentInfo/findByInstituteName' :
          type == 'className' ? '/studentInfo/findByClassName' : '';
        this.$postRequest({
          url: url,
          params: data
        }).then(res => {
          if (res.code == 200) {
            this.datalist = res.data
            this.totalCount = res.data.length
            console.log(this.totalCount)
          } else {
            this.$alert(res.msg);
          }

          // for(item in res.data){
          //   this.datalist.push(item)
          // }

        })
      }

    },
    mounted() {


    }
  }
</script>


<style>
  .main {
    overflow: auto;
  }

  .stu_card_style {
    margin: 8px;
/*    width: 200px;
    height: 110px; */
  }

  .import-header {
    overflow: auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px 20px 0px 0px;
    min-height: 40px;
    margin: 1%;
    margin-bottom: 3px;
  }

  .import-main {
    padding: 10px;
    background-color: #ffffff;
    margin: auto 1%;
    min-height: 72vh;
    max-height: 78vh;
  }

  .input-border {
    width: 20%;
    margin-right: 20px;
  }

  .cards_show {
    display: grid;
    grid-gap: 20px 20px;
    justify-content: space-between;
    grid-template-columns:repeat(auto-fill,200px);
    overflow: auto;
    align-items: center;
    width: 100%;
    height: 68vh;
    /* background-color: #001528; */
  }

  .block {
    display: flex;
    flex-direction: column-reverse;
  }
</style>
